import React, { useEffect, useState } from 'react';
import { NavLink, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { Facebook, Instagram, Twitter, Youtube, Linkedin, Menu, X, Globe } from 'lucide-react';
import { useAuth } from '../context/AuthContext';
import { useLanguage } from '../context/LanguageContext';
import { Language } from '../../types';
import { useConfig } from '../context/ConfigContext';
import PawPrintIcon from '../components/icons/PawPrintIcon';

const MainLayout: React.FC = () => {
  const { t, lang, setLang } = useLanguage();
  const { config } = useConfig();
  const { isLoggedIn, logout } = useAuth();
  const navigate = useNavigate();
  const location = useLocation();
  const [mobileMenuOpen, setMobileMenuOpen] = useState(false);

  useEffect(() => {
    window.scrollTo(0, 0);
    setMobileMenuOpen(false);
  }, [location.pathname]);

  const navLinks = [
    { path: '/', label: t.nav.home },
    { path: '/about', label: t.nav.about },
    { path: '/products', label: t.nav.products },
    { path: '/contact', label: t.nav.contact }
  ];

  const handleLogout = () => {
    logout();
    navigate('/');
  };

  const goLogin = () => navigate('/login');
  const goAdmin = () => navigate('/admin');

  return (
    <div className="min-h-screen flex flex-col font-sans text-gray-800 bg-white">
      <header className="sticky top-0 z-50 bg-white/95 backdrop-blur-sm shadow-sm transition-all border-b border-gray-100">
        <div className="bg-brand-wood text-white text-xs py-2">
          <div className="container mx-auto px-4 flex justify-between items-center">
            <div className="flex gap-4">
              <a href={config.socialLinks.facebook} className="hover:text-brand-orange transition-colors">
                <Facebook size={14} />
              </a>
              <a href={config.socialLinks.instagram} className="hover:text-brand-orange transition-colors">
                <Instagram size={14} />
              </a>
              <a href={config.socialLinks.x} className="hover:text-brand-orange transition-colors">
                <Twitter size={14} />
              </a>
              <a href={config.socialLinks.youtube} className="hover:text-brand-orange transition-colors">
                <Youtube size={14} />
              </a>
              <a href={config.socialLinks.linkedin} className="hover:text-brand-orange transition-colors">
                <Linkedin size={14} />
              </a>
            </div>
            <div className="flex items-center gap-2">
              <Globe size={12} />
              <select
                value={lang}
                onChange={(e) => setLang(e.target.value as Language)}
                className="bg-transparent border-none focus:ring-0 text-xs cursor-pointer text-white"
              >
                <option value={Language.EN} className="text-black">
                  English
                </option>
                <option value={Language.CN} className="text-black">
                  中文
                </option>
                <option value={Language.ES} className="text-black">
                  Español
                </option>
              </select>
            </div>
          </div>
        </div>

        <div className="container mx-auto px-4 py-4 flex justify-between items-center">
          <button className="flex items-center gap-2 text-3xl font-serif font-bold tracking-tight text-brand-wood" onClick={() => navigate('/')}>
            <PawPrintIcon className="text-brand-orange" width={32} height={32} />
            <span>{config.companyName}</span>
          </button>

          <nav className="hidden md:flex gap-8 font-bold text-sm tracking-wide uppercase">
            {navLinks.map((link) => (
              <NavLink
                key={link.path}
                to={link.path}
                className={({ isActive }) =>
                  `hover:text-brand-orange transition-colors ${isActive ? 'text-brand-orange' : 'text-brand-wood'}`
                }
              >
                {link.label}
              </NavLink>
            ))}
            {isLoggedIn ? (
              <>
                <button
                  onClick={goAdmin}
                  className={`hover:text-brand-orange transition-colors ${location.pathname === '/admin' ? 'text-brand-orange' : 'text-brand-wood'}`}
                >
                  Admin
                </button>
                <button onClick={handleLogout} className="hover:text-brand-orange transition-colors text-red-500">
                  Logout
                </button>
              </>
            ) : (
              <button
                onClick={goLogin}
                className={`hover:text-brand-orange transition-colors ${location.pathname === '/login' ? 'text-brand-orange' : 'text-brand-wood'}`}
              >
                Login
              </button>
            )}
          </nav>

          <button className="md:hidden text-brand-wood" onClick={() => setMobileMenuOpen((prev) => !prev)}>
            {mobileMenuOpen ? <X size={24} /> : <Menu size={24} />}
          </button>
        </div>

        {mobileMenuOpen && (
          <div className="md:hidden bg-white border-t border-gray-100 absolute w-full shadow-xl">
            <div className="flex flex-col p-4 space-y-4 font-bold uppercase text-sm text-brand-wood">
              {navLinks.map((link) => (
                <NavLink key={link.path} to={link.path} className="text-left py-2 border-b border-gray-50">
                  {link.label}
                </NavLink>
              ))}
              {isLoggedIn ? (
                <>
                  <button onClick={goAdmin} className="text-left py-2 border-b border-gray-50 text-brand-orange">
                    Admin
                  </button>
                  <button onClick={handleLogout} className="text-left py-2 text-red-500">
                    Logout
                  </button>
                </>
              ) : (
                <button onClick={goLogin} className="text-left py-2 text-brand-orange">
                  Login
                </button>
              )}
            </div>
          </div>
        )}
      </header>

      <main className="flex-grow">
        <Outlet />
      </main>

      <footer className="bg-brand-wood text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid md:grid-cols-3 gap-8 mb-8">
            <div>
              <h3 className="text-2xl font-serif font-bold tracking-widest mb-4 flex items-center gap-2">
                <PawPrintIcon width={24} height={24} className="text-brand-orange" /> {config.companyName}
              </h3>
              <p className="text-gray-300 text-sm leading-relaxed max-w-xs">{config.companyIntro}</p>
            </div>
            <div>
              <h4 className="font-bold mb-4 uppercase text-sm tracking-wider text-brand-orange">Contact</h4>
              <ul className="space-y-2 text-sm text-gray-300">
                <li>{config.address}</li>
                <li>{config.phone}</li>
                <li>{config.email}</li>
              </ul>
            </div>
            <div>
              <h4 className="font-bold mb-4 uppercase text-sm tracking-wider text-brand-orange">Follow Us</h4>
              <div className="flex gap-4">
                <a href={config.socialLinks.facebook} className="bg-white/10 p-2 rounded-full hover:bg-brand-orange hover:text-white transition-all">
                  <Facebook size={18} />
                </a>
                <a href={config.socialLinks.instagram} className="bg-white/10 p-2 rounded-full hover:bg-brand-orange hover:text-white transition-all">
                  <Instagram size={18} />
                </a>
                <a href={config.socialLinks.x} className="bg-white/10 p-2 rounded-full hover:bg-brand-orange hover:text-white transition-all">
                  <Twitter size={18} />
                </a>
                <a href={config.socialLinks.youtube} className="bg-white/10 p-2 rounded-full hover:bg-brand-orange hover:text-white transition-all">
                  <Youtube size={18} />
                </a>
                <a href={config.socialLinks.linkedin} className="bg-white/10 p-2 rounded-full hover:bg-brand-orange hover:text-white transition-all">
                  <Linkedin size={18} />
                </a>
              </div>
            </div>
          </div>
          <div className="border-t border-brand-stone/30 pt-8 text-center text-xs text-gray-400">{t.footer.rights}</div>
        </div>
      </footer>
    </div>
  );
};

export default MainLayout;

